<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
    isRequired: Boolean,
  },
});
</script>

<template>
  <view class="price-item">
    <view style="display: flex; align-items: flex-end">
      <view class="price-item-star" v-if="isRequired">*</view>
      <view class="price-item-label">{{ info.title }} </view>
      <slot />
      <view class="price-item-value">
        <text class="price-item-value2">￥</text>{{ info.price }}
      </view>
    </view>
    <view class="price-item-desc">
      <view style="font-weight: bold">{{ info.desc }}</view>
      <view style="margin-left: auto">{{ info.ticket }}</view>
    </view>
  </view>
</template>

<style lang="scss">
.price-item {
  position: relative;

  .price-item-star,
  .price-item-label {
    font-size: 32rpx;
    color: #e02020;
    line-height: 44rpx;
  }

  .price-item-label {
    color: #333333;
    font-weight: bold;
  }

  .price-item-value {
    margin-left: auto;
    font-size: 40rpx;
    color: #ee5734;
    line-height: 56rpx;
    text-align: right;
    font-weight: bold;
  }

  .price-item-value2 {
    font-size: 28rpx;
    line-height: 40rpx;
  }

  .price-item-desc {
    display: flex;
    margin-top: 6rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
  }
}
</style>